<template>
  <div class="result">
    <div class="header">
      <h1>性格分析报告</h1>
      <p>生成于：{{ generationTime }}</p>
    </div>
    <div class="main-content">
      <div class="main">
        <Fieldset class="fieldset" legend="性格类型" :toggleable="true">
          <p>您的性格类型是<span>{{ personalityType }}</span></p>
        </Fieldset>
        <Fieldset class="fieldset" legend="基础分析" :toggleable="true">
          <p v-for="describe in personalityDescribe">
            {{ describe }}
          </p>
        </Fieldset>
        <Fieldset class="fieldset" legend="MBTI" :toggleable="true">
          <p>
            “性格”是一种个体内部的行为倾向，它具有整体性、结构性、持久稳定性等特点，是每个人特有的，可以对个人外显的行为、态度提供统一的、内在的解释。
            MBTI把性格分析4个维度，每个维度上的包含相互对立的2种偏好
          </p>
        </Fieldset>
        <Fieldset class="fieldset" legend="性格特点(外向E——内向I)" :toggleable="true">
          <p>代表着各人不同的精力（Energy）来源</p>
          <div>
            <Chart class="chart"  type="pie" :data="eiDatasets"/>
          </div>
        </Fieldset>
        <Fieldset class="fieldset" legend="性格特点(感觉S—直觉N)" :toggleable="true">
          <p>表示人们在进行感知（Perception）和判断（Judgement）时不同的用脑偏好</p>
          <div>
            <Chart class="chart" type="pie" :data="snDatasets"/>
          </div>
        </Fieldset>
        <Fieldset class="fieldset" legend="性格特点(思考T—情感F)" :toggleable="true">
          <p>表示人们在进行感知（Perception）和判断（Judgement）时不同的用脑偏好</p>
          <div>
            <Chart class="chart"  type="pie" :data="tfDatasets"/>
          </div>
        </Fieldset>
        <Fieldset class="fieldset" legend="性格特点(判断J—感知P)" :toggleable="true">
          <p>针对人们的生活方式（Life Style）而言，它表明我们如何适应外部环境——在我们适应外部环境的活动中，究竟是感知还是判断发挥了主导作用</p>
          <div>
            <Chart class="chart"  type="pie" :data="jpDatasets"/>
          </div>
        </Fieldset>
        <Fieldset class="fieldset" legend="性格对比" :toggleable="true">
          <p>每一种性格类型都具有独特的行为表现和价值取向。了解性格类型是寻求个人发展、探索人际关系的重要开端</p>
           <div>
             <Chart type="radar" class="chart" :data="radarData"/>
          </div>
        </Fieldset>

      </div>


    </div>

  </div>

</template>
<script>
import Button from 'primevue/button';
import personality from '@/assets/personality.json'
import router from "@/router";
import Fieldset from 'primevue/fieldset';
import Chart from 'primevue/chart';

export default {
  data() {
    return {
      generationTime: '',
      personalityType: '',
      personalityDescribe: [],
      personality,
      radarData: {
        labels: ['外向', '内向', '感觉', '直觉', '思考', '情感', '判断', '感知'],
        datasets: [
          {
            label: '性格对比',
            data: [0, 0, 0, 0, 0, 0, 0, 0]
          }
        ]
      },
      eiDatasets:
          {
            labels: ['外向', '内向'],
            datasets: [
              {
                data: [0, 0],
              }
            ],
          }
      ,
      snDatasets:
          {
            labels: ['实感', '直觉'],
            datasets: [
              {
                data: [0, 0],
              }
            ],
          }
      ,
      tfDatasets:
          {
            labels: ['思考', '情感'],
            datasets: [
              {
                data: [0, 0],
              }
            ],
          }
      ,
      jpDatasets:
          {
            labels: ['判断', '认知'],
            datasets: [
              {
                data: [0, 0],
              }
            ],
          }
      ,
    }
  },
  computed: {},
  mounted() {
    this.init()
  },

  methods: {
    init() {
      this.getGenerationTime()
      this.getPersonalityType()

    },
    getGenerationTime() {
      const now = new Date();
      let year = now.getFullYear()
      let month = now.getMonth() + 1
      let date = now.getDate()
      let hour = now.getHours()
      let minute = now.getMinutes()
      let second = now.getSeconds()
      this.generationTime = `${year}/${month}/${date} ${hour}:${minute}:${second}`
    },
    getPersonalityType() {
      const {E, I, S, N, T, F, J, P} = this.$route.query
      let personalityType = ''
      if (E > I) {
        personalityType += 'E'
      } else {
        personalityType += 'I'
      }

      if (S > N) {
        personalityType += 'S'
      } else {
        personalityType += 'N'
      }

      if (T > F) {
        personalityType += 'T'
      } else {
        personalityType += 'F'
      }

      if (J > P) {
        personalityType += 'J'
      } else {
        personalityType += 'P'
      }

      this.personalityType = personalityType
      this.personalityDescribe = this.personality[personalityType]

      this.eiDatasets.datasets[0].data[0] = E
      this.eiDatasets.datasets[0].data[1] = I
      this.snDatasets.datasets[0].data[0] = S
      this.snDatasets.datasets[0].data[1] = N
      this.tfDatasets.datasets[0].data[0] = T
      this.tfDatasets.datasets[0].data[1] = F
      this.jpDatasets.datasets[0].data[0] = J
      this.jpDatasets.datasets[0].data[1] = P

      this.radarData.datasets[0].data[0] = E
      this.radarData.datasets[0].data[1] = I
      this.radarData.datasets[0].data[2] = S
      this.radarData.datasets[0].data[3] = N
      this.radarData.datasets[0].data[4] = T
      this.radarData.datasets[0].data[5] = F
      this.radarData.datasets[0].data[6] = J
      this.radarData.datasets[0].data[7] = P


    }


  },
  components: {
    Button, Chart, Fieldset
  }
}
</script>
<style lang="scss">
.result {

  .header {
    width: 100%;
    height: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;

    h1 {
      font-size: 40px;
      line-height: 40px;
      color: #41464b;
      //  font-weight: bold;
    }

    p {
      margin-top: 20px;
    }


  }

  .main-content {
    height: 3100px;
    .main {
      padding: 30px;
      margin-left: 20%;
      margin-right: 20%;
      height: 3000px;
      .fieldset{
        margin-bottom: 30px;
        p{
          span{
            font-size: 20px;
            line-height: 20px;
            font-weight: bold;
          }
        }
        .chart{
          width: 300px;
          height: 300px;
        }
      }
    }
  }


}

</style>
